<template>
    <div class="login-box">
        <div class="login">
            <div class="left">
                <p class="title-box">
                    <img :src="loginLeft.logo" class="left-logo" alt="">
                    <span class="title">{{ loginLeft.title }}</span>
                </p>
                <p class="synopsis">{{ loginLeft.synopsis }}</p>
                <div class="userInfo">
                    <p class="info">竞赛模块: <span>{{ loginLeft.userInfo.CompetitionModule }}</span></p>
                    <p class="info">竞赛工位: <span>{{ loginLeft.userInfo.station }}</span></p>
                    <p class="info">选手1姓名: <span>{{ loginLeft.userInfo.user1 }}</span></p>
                    <p class="info">选手2姓名: <span>{{ loginLeft.userInfo.user2 }}</span></p>
                    <p class="info">日期时间: <span>{{ loginLeft.userInfo.time }}</span></p>
                </div>
            </div>
            <div class="right">
                <h3 class="title">登录</h3>
                <div class="loginFrom">
                    <div class="username InputBox">
                        <i class="iconfont icon-yonghu"></i>
                        <input type="text" v-model="loginRight.formData.username"  @input="usernameInput" class="username-input" placeholder="登录账号">
                    </div>
                    <div class="password InputBox">
                        <i class="iconfont icon-suoding"></i>
                        <input type="text" v-model="loginRight.formData.password" @input="passwordInput" class="username-input" placeholder="登录密码">
                    </div>
                    <div class="code InputBox">
                        <input type="text" v-model="loginRight.formData.code" class="code-img" placeholder="请输入验证码">
                        <div @click="replaceCode">
                            <canvas id="canvas" width="120px" height="29px" style="width: 120px;height: 30px;"></canvas>
                        </div>
                    </div>
                    <div class="RememberPassword">
                        <input type="checkbox" v-model="loginRight.formData.rememberPassword" name="" id=""  class="checkbox"><span>记住密码自动登录</span>
                    </div>
                </div>
                <div class="submit-box">
                    <button class="submit" @click="submitForm">登录</button>
                </div>
                <div class="bottom">
                    <span class="register">注册登录</span><span class="resetting">重置信息</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {format,verificationCode,debounce} from '@/utils/PublicMethods.js'
export default {
    data(){
        return {
            loginLeft:{
                logo:require('@/assets/images/projectImg/技.png'),
                title:'工业4.0项目',
                synopsis:'Web软件应用开发平台',
                userInfo:{
                    CompetitionModule:'模块C',
                    station:'01 号',
                    user1:'雷乐梵',
                    user2:'XXX',
                    time:format('YYYY/MM/DD hh:mm:ss'),
                },
            },
            loginRight:{
                formData:{
                    username:'',
                    password:'',
                    saveCode:'',
                    code:'',
                    rememberPassword:'',
                }
            },
            regularInfo:{
                username:/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])(?=.{8,16})[A-Za-z\d@$!%*?&]{8,16}$/,
                password:/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])(?=.{8,16})[A-Za-z\d@$!%*?&]{8,16}$/,
            }   ,
            PopUpInfo:{
                show:false,
                content: '',
                classShow:false,
            },
            timer: null,
            intervalTime:500
        }
    },
    methods:{
        replaceCode(){
            this.loginRight.formData.saveCode =  verificationCode()
        },
        usernameInput() {
            clearTimeout(this.timer)
            if (!this.loginRight.formData.username) {
                this.PopUpInfo.content = '用户名不能为空'
                this.PopUpInfo.classShow = false
                this.openUpPop()
                return
            }
            this.timer = setTimeout(() => {
                if(!this.regularInfo.username.test(this.loginRight.formData.username)){
                    this.PopUpInfo.content = '用户名应包括大写字母、小写字母、特殊字符和数字组成，用户名长度介于8个字符和16个字符之间'
                    this.PopUpInfo.classShow = false
                    this.openUpPop()
                }
            }, this.intervalTime);
        },
        passwordInput() {
            clearTimeout(this.timer)
            if (!this.loginRight.formData.password) {
                this.PopUpInfo.content = '密码不能为空'
                this.PopUpInfo.classShow = false
                this.openUpPop()
                return
            }
            this.timer = setTimeout(() => {
                if (!this.regularInfo.password.test(this.loginRight.formData.password)) {
                    this.PopUpInfo.content = '密码应包括大写字母、小写字母、特殊字符和数字组成，用户名长度介于8个字符和16个字符之间'
                    this.PopUpInfo.classShow = false
                    this.openUpPop()
                }
            },this.intervalTime)
        },
        submitForm() {
            if (!this.loginRight.formData.password || !this.loginRight.formData.username) {
                this.PopUpInfo.content = '账号密码不能为空'
                this.PopUpInfo.classShow = false
                this.openUpPop()
                return
            } else if (!this.loginRight.formData.code) {
                this.PopUpInfo.content = '验证码不能为空'
                this.PopUpInfo.classShow = false
                this.openUpPop()
                return
            }
            if (this.loginRight.formData.code === this.loginRight.formData.saveCode) {
                this.PopUpInfo.content = '验证码错误'
                this.PopUpInfo.classShow = false
                this.openUpPop()
                return
            }
            if(!this.regularInfo.username.test(this.loginRight.formData.username)){
                this.PopUpInfo.content = '用户名应包括大写字母、小写字母、特殊字符和数字组成，用户名长度介于8个字符和16个字符之间'
                this.PopUpInfo.classShow = false
                this.openUpPop()
                return
            }
            if (!this.regularInfo.password.test(this.loginRight.formData.password)) {
                this.PopUpInfo.content = '密码应包括大写字母、小写字母、特殊字符和数字组成，用户名长度介于8个字符和16个字符之间'
                this.openUpPop()
                return
            }
            this.PopUpInfo.content = '登录成功'
            this.PopUpInfo.successShow = true
            this.openUpPop()
            this.$router.push('/main')
        },
        openUpPop() {
            this.$bus.$emit('openUpPop', this.PopUpInfo);
        }
    },
    mounted(){
        this.loginRight.formData.saveCode =  verificationCode()
    }
}
</script>

<style lang="less" scoped>
.login-box{
    width: 100%;
    height: 100%;
    background-color: #eff2f9;
    position: relative;
    .login{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        height: 30rem;
        width: 50rem;
        background-color: white;
        display: flex;
        box-shadow: 0px 0px 10px rgb(65, 64, 64);
        border-radius:1rem;
        .left{
            flex: 1;
            background-color: #34495e;
            padding: 2rem 2.5rem;
            box-sizing: border-box;
            border-radius:1rem 0 0 1rem;
            .title-box{
                display: flex;
                align-items: center;
                .left-logo{
                    width: 6rem;
                }
                .title{
                    font-size: 2.2rem;
                    color: white;
                }
            }
            .synopsis{
                color: white;
                font-size: 1.5rem;
                font-weight: 500;
                margin: 2rem 0;
            }
            .userInfo{
                .info{
                    color: white;
                    font-weight: 600;
                    margin: 2rem 0;
                }
            }
        }
        .right{
            flex: 1;
            background-color: #eff2f9;
            padding: 2rem 2.5rem;
            border-radius:0 1rem 1rem 0;
            box-sizing: border-box;

            .title{
                font-weight: 600;
                font-size: 2rem;
                color: #34495e;
            }
            .loginFrom{
                .InputBox{
                    border-radius: 0.5rem;
                    border: 1px solid #afafaf;
                    overflow: auto;
                    background-color: white;
                    height: 2.4rem;
                    margin: 1.2rem 0;
                    display: flex;
                    align-items: center;
                    input{
                        padding-left:0.8rem ;
                        height: 100%;
                        flex: 1;
                    }
                    i{
                        height: 100%;
                        background-color: #e7ebee;
                        flex: 0.15;
                        margin: auto 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
                .username{

                }
                .password{

                }
                .code{
                    // display: flex;
                    // align-items: center;
                    // border-radius: 0.5rem;
                    // border: 1px solid #afafaf;
                    // overflow: auto;
                    // background-color: white;
                    // height: 2.4rem;
                    // margin: 1.2rem 0;
                }
                .RememberPassword{
                    display: flex;
                    align-items: center;
                    input[type=checkbox] {
                        cursor: pointer;
                        position: relative;
                        width: 15px;
                        height: 15px;
                        font-size: 12px;
                        margin-right: 5px;
                    }

                    input[type=checkbox]::after {
                        position: absolute;
                        top: 0;
                        color: #000;
                        width: 15px;
                        height: 15px;
                        display: inline-block;
                        visibility: visible;
                        padding-left: 0px;
                        text-align: center;
                        content: ' ';
                        border-radius: 3px
                    }

                    input[type=checkbox]:checked::after {
                        content: "✓";
                        color: #fff;
                        font-size: 10px;
                        font-weight: bold;
                        background-color: #0095ff;
                    }
                    span{
                        display: inline-block;
                    }
                }
            }
            .submit-box{
                margin-bottom: 4.8rem;
                .submit{
                    width: 100%;
                    height: 35px;
                    background-color: #0095ff;
                    color: #fff;
                    border-radius: 5px;
                    margin-top: 20px;
                    border: none;
                    font-size: 1.2rem;
                }
            }
            .bottom{
                display: flex;
                justify-content: space-between;
                color: #0095ff;
                .register{

                }
                .resetting{

                }
            }
        }
    }
}

</style>